<template>
  <div id="login">
    <div class="mask"></div>
    <div @click.stop class="login-box">
      <div class="login-top flex" @mousedown="move">
        <h6>手机号登录</h6>
        <span @click="udateLoginShow(false)">x</span>
      </div>
      <div class="login-body">
        <div class="login-center">
          <!-- 双向数据绑定手机号 -->
          <input
            type="text"
            placeholder="请输入手机号"
            v-model.trim="phone"
            class="phone"
          />
          <div class="Verification flex">
            <input
              v-show="showCode"
              v-model.trim="verCode"
              type="text"
              class="VerificationCode"
              placeholder="请输入验证码"
              @keyup.enter="loign"
            />
            <input
              v-show="!showCode"
              v-model.trim="myPwd"
              type="password"
              class="VerificationCode pwdLogin"
              placeholder="请输入密码"
              @keyup.enter="loign"
            />
            <!-- 注册点击事件获取验证码 -->
            <span @click="GetVerification" v-show="showCode"
              >获取验证码<i v-show="secend !== 60">({{ secend }})</i></span
            >
          </div>
          <div class="LoginMode flex">
            <span class="pwd" @click="showCode = !showCode">
              切到{{ showCode ? "密码登录" : "验证码登录" }}</span
            >
            <span class="automatic flex">
              <input type="checkbox" />
              自动登录
            </span>
          </div>
          <!-- 登录按钮 -->
          <div class="login-btn" @click="loign">登录</div>
        </div>
      </div>
      <div class="otherLogin flex">
        <p>&lt; 其他登录方式</p>
        <a>没有账号？免费注册 &gt;</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { verification } from "../utils";
import { getCode, getCodeLogin, getPwdLogin } from "../http/api";
export default {
  data() {
    return {
      myPwd: "",
      showCode: true,
      phone: "",
      //验证码
      verCode: "",
      secend: 60,
    };
  },
  computed: {
    ...mapState({
      logonShow: (state) => state.login.logonShow,
    }),
  },
  methods: {
    //获取验证码
    GetVerification() {
      if (!verification(this.phone))
        return this.$message({
          showClose: true,
          message: "手机格式不正确",
          type: "warning",
        });
      if (this.secend != 60) {
        return this.$message({
          showClose: true,
          message: "请在" + this.secend + "秒后发送",
          type: "warning",
        });
      }

      getCode(this.phone).then((res) => {
        if (res.code === 200) {
          if (res.data === true) {
            console.log("验证码", res);
            this.$message({
              showClose: true,
              message: "验证码已发送",
              type: "success",
            });
            if (this.secend == 60) {
              --this.secend;
              const timmer = setInterval(() => {
                this.secend--;
                if (this.secend == 0) {
                  this.secend = 4;
                  clearInterval(timmer);
                }
              }, 1000);
            }
          }
        } else if (res.code !== 200) {
          this.$message({
            showClose: true,
            message: "发送失败",
            type: "error",
          });
        }
      });
    },
    //登录
    async loign() {
      if (localStorage.getItem("token")) {
        return this.$message({
          showClose: true,
          message: "请注销用户再登录",
          type: "error",
        });
      }
      if (!verification(this.phone))
        return this.$message({
          showClose: true,
          message: "手机格式不正确",
          type: "warning",
        });

      if (!this.showCode) {
        if (this.myPwd == "")
          return this.$message({
            showClose: true,
            message: "请正确输入",
            type: "warning",
          });
        const res = await getPwdLogin(this.phone, this.myPwd);
        if (res.code === 200) {
          localStorage.setItem("token", res["token"]);
          localStorage.setItem("userId", res.profile.userId);
          this.$message({
            showClose: true,
            message: "登录成功",
            type: "success",
          });
          this.$store.commit("isLogin");
          this.udateLoginShow(false);
        }
      } else if (this.showCode) {
        if (this.verCode == "")
          return this.$message({
            showClose: true,
            message: "请正确输入",
            type: "warning",
          });
        const res = await getCodeLogin(this.phone, this.verCode);
        if (res.code === 200) {
          localStorage.setItem("token", res["token"]);
          localStorage.setItem("userId", res.profile.userId);
          this.$message({
            showClose: true,
            message: "登录成功",
            type: "success",
          });
          this.$store.commit("isLogin");
          this.udateLoginShow(false);
        }
      } else {
        this.$message({
          showClose: true,
          message: "登录失败",
          type: "error",
        });
      }
    },
    ...mapMutations({
      udateLoginShow: "login/udateLoginShow",
    }),
    move(e) {
      let odiv = e.target.parentNode; //获取目标元素

      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;

        //移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
  },
};
</script>

<style lang="less" scoped>
#login {
  z-index: 999;
  position: fixed;
  width: 100%;
  height: 100%;
}
.login-box {
  position: fixed;
  width: 530px;
  height: 315px;
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #2d2d2d;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px 3px rgba(0, 0, 0, 0.5);
  .login-top {
    justify-content: space-between;
    padding: 0 20px;
    line-height: 40px;
    background: #2d2d2d;
    cursor: move;
    h6 {
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }
    span {
      color: #888888;
      cursor: pointer;
      font-size: 20px;
    }
  }
  .login-body {
    height: 224px;
    border-bottom: 1px solid #c6c6c6;
    overflow: hidden;
    .login-center {
      width: 225px;
      height: 153px;
      margin: 30px auto 0;
      input {
        border: #cdcdcd 1px solid;
        outline: none;
        height: 32px;
        box-sizing: border-box;
        text-indent: 5px;
      }
      .phone {
        width: 100%;
      }
      .pwdLogin {
        flex: 1;
      }
      .Verification {
        margin-top: 10px;
        justify-content: space-between;
        .VerificationCode {
          width: 120px;
        }
        span {
          //   width: 90px;
          margin-left: 5px;
          flex: 1;
          font-size: 12px;
          background: #f2f2f2;
          border-radius: 5px;
          text-align: center;
          padding: 8px;
          border: #cdcdcd 1px solid;
          cursor: pointer;
        }
      }
      .LoginMode {
        margin: 10px 0;
        justify-content: space-between;
        .pwd {
          color: #666666;
          font-size: 13px;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
        .automatic {
          overflow: hidden;
          font-size: 13px;
          color: #666666;
        }
        input {
          margin-right: 6px;
          height: auto;
        }
      }
    }
  }
}
.login-btn {
  height: 30px;
  background: #3483cf;
  border-radius: 5px;
  line-height: 30px;
  color: #fff;
  letter-spacing: 15px;
  padding-left: 90px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 20px;
  &:hover {
    background: #4e97db;
  }
}
.otherLogin {
  padding: 0 20px;
  font-size: 12px;
  justify-content: space-between;
  line-height: 48px;
  background: #f7f7f7;
  p {
    color: #0c72c3;
    cursor: pointer;
  }
  a {
    color: #999999;
    cursor: pointer;
  }
}
</style>
